<template>
    <div id="vue_det">
        <h1>33333333333333</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">反转字符串</button>
        <br/>

        <div v-if="Math.random()>0.5">

            Sorry

        </div>
        <div v-else>
            Not sorry
        </div>

        <h1 v-show="ok">Hello</h1>

        <ol>
            <li v-for="(site,index) in sites">
                {{index}}:{{site.name}}
            </li>
        </ol>

        <ul>
            <li v-for="(value,key,inex) in object">
                {{inex}}: {{key}}:{{ value }}
            </li>
        </ul>


    </div>
</template>

<script type="text/javascript">

    export default {
        name: 'MinePage',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                site: "平日",
                alexa: "10000",
                message: 'Runnoob',
                ok: true,
                sites: [
                    {name: 'Runoob'},
                    {name: 'Google'},
                    {name: 'Taobao'}
                ],
                object: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                },
                name: 'Google',
                url: 'http://www.google.com'
            }
        },
        methods: {

            details: function () {
                return this.site + " - 学的不仅是技术，更是梦想！";
            },
            reverseMessage: function () {

                this.message = this.message.split('').reverse().join('')
            }
        },


        computed: {

            site:{

                get:function () {

                    return this.name+''+this.url

                },

                // setter
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.name = names[0]
                    this.url = names[names.length - 1]
                }
            }
        }

    }
</script>


